<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader class="product_tabs" title="客户评价" hidden-breadcrumb></PageHeader>
        </div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <div class="pingjia">
                <div class="left">
                    <Table :columns="columns" :data="tableList">
                        <template slot-scope="{ row }" slot="name">
                            <a @click="showUserInfo(row)">点击查询</a>
                        </template>
                        <template slot-scope="{ row }" slot="nickImage">
                            <img class="imgAvatar" :src="row.userInfo.avatar"/>
                        </template>
                        <template slot-scope="{ row }" slot="nickname">
                            <div>{{ row.userInfo.nickname }}</div>
                        </template>
                        <template slot-scope="{ row }" slot="survey">
                            <a @click="showSurvey(row)">查看问卷</a>
                        </template>
                    </Table>
                    <div class="acea-row row-left page">
                        <Page
                        :total="page.total"
                        :current="page.pageNum"
                        show-elevator
                        show-total
                        @on-change="pageChange"
                        :page-size="page.pageSize"
                        @on-page-size-change="limitChange"
                        show-sizer
                        />
                    </div>
                </div>
                <div class="right">
                    <Button class="ml10 daochu" @click="exports">导出</Button>
                    <div class="toptitle">服务满意度调查问卷</div>
                    <template v-if="survey">
                        <div class="paddcen" v-for="(item, index) in survey.content" :key="index">
                            <div class="nameTop">{{item.id}} {{item.name}}</div>
                            <div>{{ item.value }}</div>
                        </div>
                    </template>
                    <div v-else>
                        <div class="zhishi">
                            <img class="zhiyin" src="https://shop.facejuva.com/uploads/attach/2024/11/20241107/9d8c77c14eeefb6352207feffd2616f1.png" alt="">
                        </div>
                       <div class="zhitext">点击左侧列表查看问卷</div>
                    </div>
                </div>
            </div>
            <!-- 会员详情-->
            <user-details ref="userDetails"></user-details>

        </Card>
    </div>
  </template>

  <script>
    import { mapState } from 'vuex';
    import { recordFormIndex,exportFormList } from '@/api/marketing';
    import userDetails from "@/pages/user/list/handle/userDetails";
    import exportExcel from "@/utils/newToExcel.js";
    export default {
        name: 'appointmentRecord',
        components:{
            userDetails,
        },
        data () {
            return {
                columns: [
                    {
                        title: 'id',
                        key: 'id',
                        minWidth: 50
                    },
                    {
                        title: '用户头像',
                        slot: 'nickImage',
                        minWidth: 120
                    },
                    {
                        title: '用户名昵称',
                        slot: 'nickname',
                        minWidth: 120
                    },
                    {
                        title: '用户信息',
                        slot: 'name',
                        minWidth: 120
                    },
                    {
                        title: '提交时间',
                        key: 'add_time',
                        minWidth: 120
                    },
                    {
                        title: '查看问卷',
                        slot: 'survey',
                        minWidth: 120
                    },
                ],
                tableList: [],
                grid: {
                    xl: 7,
                    lg: 7,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                tableFrom: {
                    status: '',
                    phone: '',
                    type: 6,
                },
                page: {
                      total: 0, // 总条数
                      pageNum: 1, // 当前页
                      pageSize: 10, // 每页显示条数
                },
                total: 0,
                textType: 6,
                survey: "",
            }
        },

        created () {
            this.getList();
        },
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 90;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        },
        methods: {
            showUserInfo(row) {
                this.$refs.userDetails.modals = true;
                this.$refs.userDetails.getDetails(row.uid);
            },
            // 列表
            getList () {
                this.loading = true;
                recordFormIndex({
                  page: this.page.pageNum,
                  limit: this.page.pageSize,
                  phone: this.tableFrom.phone,
                  type: this.textType
                }).then(async res => {
                    let data = res.data
                    this.tableList = data.list = data.list.map(item => {
                        item.content = JSON.parse(item.content);
                        return item;
                        });
                    this.page.total = data.count;
                    this.loading = false;
                }).catch(res => {
                    this.loading = false;
                    this.$Message.error(res.msg);
                })
            },
            pageChange (index) {
                this.page.pageNum = index;
                this.getList();
            },
            limitChange(limit) {
              this.page.pageSize = limit;
              this.getList();
            },
            // 表格搜索
            userSearchs () {
                this.page.pageNum = 1;
                this.getList();
            },
            showSurvey(row){
                let that = this
                this.tableList.forEach((item)=>{
                    if(item.id == row.id){
                        that.survey = item;
                        console.log(item,"6666");
                    }
                });
            },
            async exports(){
                let [th, filekey, data, fileName] = [[], [], [], ""];
                let excelData = JSON.parse(JSON.stringify(this.tableFrom));
                // console.log(excelData,"1111")
                excelData.page = 1;
                for (let i = 0; i < excelData.page + 1; i++) {
                    let lebData = await this.getExcelData(excelData);
                    if (!fileName) fileName = lebData.filename;
                    if (!filekey.length) {
                    filekey = lebData.filekey;
                    }
                    if (!th.length) th = lebData.header;
                    if (lebData.export.length) {
                        data = data.concat(lebData.export);
                        excelData.page++;
                    }
                }
                exportExcel(th, filekey, fileName, data);
            },
            getExcelData(excelData) {
                return new Promise((resolve, reject) => {
                    exportFormList(excelData).then((res) => {
                    return resolve(res.data);
                    });
                });
            },
        }
    }
  </script>

  <style scoped>
  .wenti{
    display: flex;
    flex-wrap: wrap;
    /* border: 1px solid #000; */
    color: #e75f47;
    background: #ebeae5;
  }
  .ti{
    padding: 5px 20px;
  }
  .imgAvatar{
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .pingjia{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .left{
    width: calc(100% - 420px);
  }
  .right{
    width: 400px;
    background: url("https://shop.facejuva.com/uploads/attach/2024/08/20240814/7adf1be6e1ea743796f399ea5c28d34d.png") no-repeat;
    background-size: 100% 100%;
    min-height: 70vh;
    border-radius: 10px;
  }
  .daochu{
    background: #51bfff;
    color: #fff;
    padding: 0 20px;
  }
  .toptitle{
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    padding: 20px 0;
  }
  .paddcen{
    padding: 10px 20px;
  }
  .nameTop{
    font-weight: bold;
    margin-bottom: 6px;
    font-size: 16px;
  }
  .zhishi{
    display: flex;
    justify-content: center;
  }
  .zhiyin{
    width: 200px;
    height: 200px;
    margin-top: 100px;
    animation: leftGuide 1s ease-in-out infinite alternate;
  }
  /* 定义关键帧动画 */
    @keyframes leftGuide {
    from {
        transform: translateX(0); /* 初始位置，不偏移 */
    }
    to {
        transform: translateX(-50px); /* 向左偏移50px，可根据需求调整偏移量 */
    }
    }
  .zhitext{
    text-align: center;
    font-size: 14px;
    color: #8d8d8d;
  }
  </style>
